<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/axios.js"></script>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/index.js"></script>
    <script src="/static/js/pagination.js"></script>
    <link rel="stylesheet" href="static/style/bootstrap.css">
    <link rel="stylesheet" href="static/style/index.css">
</head>
<body>
<div id="app">
    <el-input placeholder="姓名模糊查询" v-model="query.susName" clearable style="width: 200px"></el-input>
    <el-input placeholder="性别查询" v-model="query.suSex"  clearable style="width: 200px"></el-input>
    <el-table
            :data="tableData"
            style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <el-table-column
                tprop="suCode"
                label="用户编码">
        </el-table-column>
        <el-table-column
                prop="susName"
                label="分类名">
        </el-table-column>
        <el-table-column
                prop="suName"
                label="用户登陆名">
        </el-table-column>
        <el-table-column
                label="性别">
                <template slot-scope="scope">{{ scope.row.suSex == '1' ? "男":"女" }}</template>
        </el-table-column>
        <el-table-column
                prop="suAge"
                label="年龄">
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="query.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</body>
<script>
    new Vue ({
        el:"#app",
        data:{
            tableData:[],
            query:{
                suCode:"",
                susCode:"",
                suName:"",
                suSex:"",
                suAge:"",
                susName:"",
                suAge:"",
                pageNum:1,
                pageSize:5
            },
        },
        watch:{
            query: {
                deep:true,
                handler(){
                    this.initData();
                }
            }
        },
        methods:{

            initData(){
                axios.post(`/user/list?pageNum=${this.query.pageNum}&pageSize=${this.query.pageSize}`,this.query).then(res=>{
                    this.total=res.data.total;
                 this.tableData=res.data.list;
            })

            },
            handleSizeChange(val) {
                this.query.size=val;
            },
            handleCurrentChange(val) {
                this.query.page=val;
            },

        },
        created(){
            this.initData();
        }
    })
</script>
</html>